<template>
  <div class="address">
    <!-- 头部 -->
    <NavigationBar :title="this.$route.params.type === 'add'?'添加收获地址':'编辑收货地址'"></NavigationBar>
    <div class="main">
      <van-field v-model="name" label="姓名:" placeholder="请输入姓名"/>
      <van-field v-model="tel" type="tel" label="联系方式:" placeholder="请输入手机号码 "/>
      <van-field v-model="address" readonly label="所在地区:" @click="show=true" placeholder="请输入所在地区"/>
      <van-field v-model="detailedAddress" type="textarea" :autosize='{minHeight: 90 }' label="详细地址:"
                 placeholder="请输入详细地址"/>
      <van-cell center title="设为默认地址">
        <template #right-icon>
          <van-switch v-model="checked" size="24"/>
        </template>
      </van-cell>
      <van-popup v-model="show" position="bottom">
        <van-area :area-list="areaList" @confirm="confirm" @cancel="cancel"/>
      </van-popup>
      <div class="operate">
        <van-button class="save" round size="large" type="info" @click="save">保 存</van-button>
        <van-button v-if="this.$route.params.type !== 'add'" class="del" round size="large" type="info" @click="del">
          删除地址
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog} from "vant";

export default {
  name: "Address",
  data() {
    return {
      name: "",
      tel: "",
      address: "",
      checked: false,
      detailedAddress: "",
      show: false,
      areaList: {},
      mapAddress: {},
      mapAddressId: ""
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    del() {
      Dialog.confirm({
        title: '确认删除',
        message: '是否要删除',
      }).then(() => {
        this.$ajax.delAddress({
          consignee: this.$route.params.id
        }).then(res => {
          this.$router.back()
        })
      })
    },
    save() {
      // console.log(this.$route.params.type === "add")
      if (this.$route.params.type === "add") {
        this.$ajax.addAddress({
          address: this.detailedAddress,
          is_default: this.checked,
          mobile: this.tel,
          name: this.name,
          region: this.mapAddressId,
          tel: this.tel
        }).then(res => {
          if (res.error_code === 0) {
            this.$toast("添加成功")
            this.$router.back()
          } else {
            this.$toast(res.error_desc)
          }
          // console.log(res)
        })
      } else {
        this.$ajax.upAddress({
          address: this.detailedAddress,
          consignee: this.$route.params.id,
          is_default: this.checked,
          mobile: this.tel,
          name: this.name,
          region: this.mapAddressId,
          tel: this.tel
        }).then(res => {
          if (res.error_code === 0) {
            this.$toast("修改成功")
            this.$router.back()
          } else {
            this.$toast(res.error_desc)
          }
        })
      }

    },
    confirm(arr) {
      // console.log(arr);
      this.address = arr.reduce((prev, item) => {
        return prev + item.name + " ";
      }, "");
      // console.log(arr[arr.length - 1].code)
      // console.log(this.mapAddress[arr[arr.length - 1].code])
      this.mapAddressId = this.mapAddress[arr[arr.length - 1].code]
      this.show = false;
    },
    cancel() {
      this.show = false;
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    let thatareaList = {
      province_list: {},
      city_list: {},
      county_list: {},
    }
    this.$ajax.allAddress().then(res => {
      // 省
      res.regions[0].regions.forEach((province, province_i) => {
        let sheng = province_i + 10
        thatareaList.province_list[parseInt(sheng + '0000')] = province.name
        // 市
        Array.isArray(province.regions) && province.regions.forEach((city, city_i) => {
          let shi = city_i.toString().length < 2 ? '0' + city_i : city_i.toString()
          thatareaList.city_list[parseInt(sheng + shi + '00')] = city.name
          // 区
          Array.isArray(city.regions) && city.regions.forEach((county, county_i) => {
            let xian = county_i.toString().length < 2 ? '0' + county_i : county_i.toString()
            thatareaList.county_list[parseInt(sheng + shi + xian)] = county.name
            this.mapAddress[parseInt(sheng + shi + xian)] = county.id
          })
        })
      })
      // console.log(this.mapAddress)
      this.areaList = thatareaList
      // console.log(this.areaList)
    })


    this.$ajax.myAddress().then(res => {
      let address = res.consignees.filter(item => item.id == this.$route.params.id)
      if (address.length > 0) {
        address = address[0]
        this.name = address.name
        this.tel = address.mobile
        this.address = address.regions.reduce((prev, item) => {
          return prev + item.name + " "
        }, '')
        this.detailedAddress = address.address
        this.checked = address.is_default
        this.mapAddressId = address.regions.reduce((prev, item) => {
          if (prev < item.region_id) {
            return item.region_id
          }
        }, 0)
      }
    })

  }
}
</script>

<style lang="scss" scoped>
.address {
  .main {
    margin: 10px 0;
    padding: 0 20px;

    ::v-deep.van-cell {
      min-height: 53px;
      font-size: 14px;
      color: #7e7f84;
      padding: 4px 0;
      background-color: transparent;

      .van-cell__title {
        span {
          width: 75px;
          height: 45px;
          line-height: 45px;
          color: #9b9b9b;
          font-weight: 400;
          font-size: 14px;
        }
      }

      .van-field__value {
        .van-field__body {
          input {
            height: 45px;
            line-height: 45px;
          }
        }
      }
    }

    ::v-deep.van-switch {
      background-color: rgb(223, 223, 223);
      border: 0;
      width: 50px;
      height: 26px;

      .van-switch__node {
        width: 14px !important;
        height: 14px !important;
        top: 50%;
        left: 5px !important;
        right: auto !important;
        transform: translateY(-50%);
      }
    }

    ::v-deep.van-switch--on {
      background-color: rgb(0, 122, 255);
      border: 0;

      .van-switch__node {
        width: 14px !important;
        height: 14px !important;
        top: 50%;
        left: auto !important;
        right: 5px !important;
        transform: translateY(-50%);
      }
    }

    .operate {
      position: fixed;
      width: 90%;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);

      button {
        width: 100%;
        height: 45px;
        font-size: 16px;
        text-align: center;
        line-height: 45px;
        border-radius: 23px;
      }

      .save {
        background-image: linear-gradient(90deg, #72b4fe, #3777f7);
        color: #fff;
      }

      .del {
        color: #4a4a4a;
        border: 1px solid #b8b8b8;
        margin-top: 20px;
        background-color: transparent;
      }
    }
  }

}
</style>